<template>
	<view>
		<carHeader :title="'信息修改'"></carHeader>
		<view class="content">
			<view class="c1">
				<image class="i1" src="../../static/车联网服务-08我的 -02个人信息-02信息修改-手机号_slices/手机号.png"></image>
				<input type="text" placeholder="请输入手机号码" style="width: 80%;" v-model="phone" />
			</view>
			<image class="cha" src="../../static/车联网服务-08我的 -02个人信息-02信息修改-手机号_slices/组 5.png" @click="shan"></image>
			<view class="c1" style="width: 400rpx;">
				<image class="i1" src="../../static/车联网服务-08我的 -02个人信息-02信息修改-手机号_slices/验证码.png"></image>
				<input type="text" placeholder="请输入验证码" style="width: 80%;" v-model="code" />
			</view>
			<view class="wrap">
				<u-toast ref="uToast"></u-toast>
				<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
				<u-button type="primary" @tap="getCode">{{tips}}</u-button>
			</view>
			<view class="tijiao">
				<u-button type="primary" text="提交"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				// refCode: null,
				seconds: 60,
				phone:'',
				code:''
			};
		},
		methods: {
			shan(){
				this.phone='';
			}
			,
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('已发送验证码');
			}
		}
	}
</script>

<style lang="scss">
	.content {
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		position: relative;
		top: -220rpx;
		background-color: white;

		.c1 {
			border: 2rpx solid black;
			display: flex;
			height: 80rpx;
			align-items: center;
			border-radius: 20rpx;
		}

		.i1 {
			height: 50rpx;
			width: 40rpx;
			margin: 0 10rpx;
		}

		.cha {
			height: 50rpx;
			width: 50rpx;
			position: relative;
			left: 590rpx;
			top: -65rpx;
		}

		.wrap {
			width: 200rpx;
			position: relative;
			left: 420rpx;
			top: -80rpx;
		}

		.tijiao {
			width: 200rpx;
			margin: 0 auto;
		}
	}
</style>